<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
  <title>餐厅台况</title>
  <!-- Bootstrap -->
  <link href="../assets/css/mui.min.css" rel="stylesheet">
  <link href="fonts/iconfont.css" rel="stylesheet">
  <link href="../assets/css/style.css" rel="stylesheet" />
  <link href="../assets/css/boss_content.css" rel="stylesheet" />
</head>

<body>
  <header id="header" class="mui-bar mui-bar-nav">
    <h1 class="mui-title">餐厅台况</h1>
    <button class="mui-action-back mui-btn mui-btn-blue mui-btn-link mui-btn-nav mui-pull-left">
      <span class="mui-icon mui-icon-left-nav"></span>返回</button>
      <a class="mui-pull-right headerright"><i class="icon iconfont icon-gengduo"></i></a>
    </header>
    <div class="mui-content">
      <div class="bosscontent_title mui-row">
        <div class="mui-col-xs-6 bosscontent_title_lf">
          <div class=" ">
            <p>8900.00</p>
            <p>当前营业额(元)</p>
          </div>
        </div>

        <div class="mui-col-xs-6 bosscontent_title_rt">
          <div class="">
            <p>9/21</p>
            <p>台位</p>
          </div>
        </div>
      </div>

      <div class="bosscontent_title2   mui-row">
       <div class="mui-col-xs-4">
        <p>24</p>
        <p>翻台</p>
      </div>
      <div class="mui-col-xs-4">
       <p>2444.00</p>
       <p>已结</p>
     </div>
     <div class="mui-col-xs-4">
       <p>24440.00</p>
       <p>未结</p>
     </div>
   </div>
   <div class="coupon-list">
        <div class="kqjl-bgcolor mui-row cttk-con">
          <div class="mui-col-xs-3 zw-status zw-active">
            <div class="use-status">使用</div>
            <div class="zw-num">101</div>
            <div class="use-min">6分钟</div>
          </div>
          <div class="mui-col-xs-3 zw-status">
            <div class="use-status">空闲</div>
            <div class="zw-num">101</div>
            <div class="use-min hidden">6分钟</div>
          </div>
          <div class="mui-col-xs-3 zw-status">
            <div class="use-status">空闲</div>
            <div class="zw-num">101</div>
            <div class="use-min hidden">6分钟</div>
          </div>
          <div class="mui-col-xs-3 zw-status">
            <div class="use-status">空闲</div>
            <div class="zw-num">101</div>
            <div class="use-min hidden">6分钟</div>
          </div>
          <div class="mui-col-xs-3 zw-status">
            <div class="use-status">空闲</div>
            <div class="zw-num">101</div>
            <div class="use-min hidden">6分钟</div>
          </div>
          <div class="mui-col-xs-3 zw-status">
            <div class="use-status">空闲</div>
            <div class="zw-num">101</div>
            <div class="use-min hidden">6分钟</div>
          </div>
          <div class="mui-col-xs-3 zw-status">
            <div class="use-status">空闲</div>
            <div class="zw-num">101</div>
            <div class="use-min hidden">6分钟</div>
          </div>
          <div class="mui-col-xs-3 zw-status">
            <div class="use-status">空闲</div>
            <div class="zw-num">101</div>
            <div class="use-min hidden">6分钟</div>
          </div>
          <div class="mui-col-xs-3 zw-status">
            <div class="use-status">空闲</div>
            <div class="zw-num">101</div>
            <div class="use-min hidden">6分钟</div>
          </div>
          <div class="mui-col-xs-3 zw-status">
            <div class="use-status">空闲</div>
            <div class="zw-num">101</div>
            <div class="use-min hidden">6分钟</div>
          </div>
          <div class="mui-col-xs-3 zw-status">
            <div class="use-status">空闲</div>
            <div class="zw-num">101</div>
            <div class="use-min hidden">6分钟</div>
          </div>
          <div class="mui-col-xs-3 zw-status">
            <div class="use-status">空闲</div>
            <div class="zw-num">101</div>
            <div class="use-min hidden">6分钟</div>
          </div>
          <div class="mui-col-xs-3 zw-status">
            <div class="use-status">空闲</div>
            <div class="zw-num">101</div>
            <div class="use-min hidden">6分钟</div>
          </div>
          <div class="mui-col-xs-3 zw-status">
            <div class="use-status">空闲</div>
            <div class="zw-num">101</div>
            <div class="use-min hidden">6分钟</div>
          </div>
          <div class="mui-col-xs-3 zw-status">
            <div class="use-status">空闲</div>
            <div class="zw-num">101</div>
            <div class="use-min hidden">6分钟</div>
          </div>
          <div class="mui-col-xs-3 zw-status">
            <div class="use-status">空闲</div>
            <div class="zw-num">101</div>
            <div class="use-min hidden">6分钟</div>
          </div>
          <div class="mui-col-xs-3 zw-status">
            <div class="use-status">空闲</div>
            <div class="zw-num">101</div>
            <div class="use-min hidden">6分钟</div>
          </div>
        </div>
      </div>
  </div>

</div>
<script src="../assets/js/jquery.min.js"></script>
<script src="../assets/js/mui.js"></script>
<script type="text/javascript">
  $('.zw-status').on('click',function(){
    if($(this).hasClass('zw-active')){
      $(this).removeClass('zw-active');
      $(this).children('.use-status').html('空闲')
      $(this).children('.use-min').addClass('hidden')
    }
    else{
      $(this).addClass('zw-active');
      $(this).children('.use-status').html('使用')
      $(this).children('.use-min').removeClass('hidden')
    }
  })
</script>
</body>

</html>